<template>
  <div>
    <h1>App...</h1>
    <p>{{ num }}</p>
    <!-- 
      普通DOM事件
        事件名：固定有限几个
        触发事件，操作页面某个元素就可以触发
      自定义事件 
        事件名：任意
        触发事件：手动调用函数才能触发

      1. 绑定事件
        - <ChildComp @事件名称="事件回调函数" />

        - <ChildComp ref="xxx" />
        mounted() {
          this.$refs.xxx.$on(事件名称, 事件回调函数)
        },
        beforeDestroy() {
          this.$refs.xxx.$off(事件名称, 事件回调函数)
        }
      2. 触发事件
        this.$emit(事件名称, 参数1, 参数2...)
        
      
      特点：
        1. 给哪个组件绑定事件，就只有这个组件可以触发
        2. 给组件绑定的默认都是自定义事件，
              如果想给组件绑定DOM事件？
                可以使用事件修饰符来完成 .native
                会给组件的根标签绑定相应的DOM事件
           给普通元素绑定的都是DOM事件（如果事件名不是DOM事件名，那么这个事件就无效）
      
      适用于场景：父子组件（子组件修改父组件数据）
 
      $on(事件名, 事件回调函数)    绑定持久事件
      $once(事件名, 事件回调函数)  绑定一次性事件
      $off(事件名, 事件回调函数)   解绑事件
      $emit(事件名, 参数1, 参数2...) 触发事件
      

      总结：父子组件通信
        父 -> 子 props
        子 -> 父 自定义事件
    -->
    <button @click="handleClick">App按钮</button>
    <!-- <ChildComp @add="add" @mousemove.native="add" /> -->
    <!-- <ChildComp @add="add" /> -->
    <ChildComp ref="child" />
  </div>
</template>

<script>
import ChildComp from "./views/ChildComp";

export default {
  name: "App",
  components: {
    ChildComp,
  },
  mounted() {
    // 1. 组件此时才挂载才能操作 2. 事件绑定只做一次
    // 绑定自定义事件
    // 除了数据代理后的属性，其他可以用的属性都是$开头
    // this.$refs.child.$on("add", this.add);
    this.$refs.child.$on("add", function () {
      console.log(111);
    });
    this.$refs.child.$once("add", function () {
      console.log(222);
    });
    this.$refs.child.$on("add", function () {
      console.log(333);
    });
  },
  beforeDestroy() {
    // 解绑事件
    this.$refs.child.$off();
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    add(val) {
      console.log(arguments);
      this.num += val;
    },
    handleClick() {
      this.$emit("add");
    },
  },
};
</script>

<style>
</style>